<template>
  <div>
    <!-- 对话框组件 -->
    <el-dialog
      :width="width+'px'"
      :visible.sync="dialogSwitch"
      :before-close="beforeClose"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <!--自定义功能插件-->
      <slot name="content"> 默认内容 </slot>

      <!-- 对话框组件的按钮-->
      <template #footer>
        <slot name="btns">
          <el-button @click="confirmExecute" type="primary" size="mini">确认</el-button>
          <el-button @click="switchEvent" type="info" size="mini">取消</el-button>
        </slot>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    //对话框宽度
    width: {
      type: Number,
      default: "1260px",
      required: false,
    },
    //子组件的ref
    childRef:{
      type: String,
      required: true
    },
    //执行确认的方法
    executeConfirm: {
      type: Function,
      required: false,
    },
  },
  data(){
    return {
      dialogSwitch:false
    }
  },
  methods: {
    //关闭并校验是否可以关闭
    beforeClose(done) {
      if (this.visible) {
        done();
      } else {
        done(false);
      }
    },
    //确认执行
    async confirmExecute() {
      //子组件执行成功才允许关闭会话
      let executeResult = await this.executeConfirm(this.childRef);
      if (executeResult) {
        //关闭会话
        this.switchEvent()
      }
    },
    switchEvent(){
      this.dialogSwitch = !this.dialogSwitch;
    }
  },
  mounted() {
    //删除元素的header关闭,只能让用户点击确认或取消
    let dialogHeaderDom = document.querySelector(".el-dialog__header");
    dialogHeaderDom.style.display = "none";
  },
};
</script>

<style lang="less" scoped></style>
